<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="page-toolbar">
                    <div class="pull-left">
                        <router-link to="/addDevice">
                            <el-button class="btnStyle" v-has="'deviceAdd'">添加设备</el-button>
                        </router-link>
                    </div>
                    <div class="input-group">
                        <el-form ref="formRef" :model="SearchList" :inline="true" class="demo-ruleForm">
                            <el-form-item porp="online">
                                <el-select v-model="SearchList.online" placeholder="状态">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" class="selectstyle" />
                                </el-select>
                            </el-form-item>
                            <el-form-item porp="keyword">
                                <el-input v-model="SearchList.keyword" placeholder="可搜索名称/IMEI" />
                            </el-form-item>
                            <el-form-item>
                                <el-button class="btnStyle" @click="searchBtn">搜索</el-button>
                                <el-button class="btnStyle" @click="cancelClick()">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="page-table-header"></div>
                <div class='page-table'>
                    <el-table v-loading="loading" element-loading-text="加载数据..." ref="multipleTableRef" :data="deviceData"
                        style="width: 100%;height: 100%;"
                        :header-cell-style="{ background: '#3CB731', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }"
                        size="small">
                        <template #empty>
                            <el-empty description="暂无数据！" />
                        </template>
                        <el-table-column property="imei" label="称重板序号" width="200" align="center" fixed />
                        <el-table-column property="android_imei" label="安卓板序号" width="200" align="center" />
                        <el-table-column property="sim.phone" label="流量卡号" width="200" align="center" />
                        <el-table-column property="name" label="设备名称/备注" width="220" align="center" />
                        <el-table-column property="address" label="安装地址" width="220" align="center" />
                        <el-table-column property="type" label="类型" width="140" align="center">
                            <template #default="{ row }">
                                <div class="table-tag">
                                    <el-tag v-if="row.type == 1">称重板</el-tag>
                                    <el-tag type="info" v-if="row.type == 2">称重板/视觉板</el-tag>
                                    <el-tag type="warning" v-if="row.type == 3">视觉板</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column property="online" label="在线状态" width="100" align="center">
                            <template #default="{ row }">
                                <div class="table-tag">
                                    <el-tag v-if="row.online == 1">在线</el-tag>
                                    <el-tag type="info" v-if="row.online == 2">离线</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column property="enabled" label="状态" width="100" align="center">
                            <template #default="scope">
                                <div class="table-tag">
                                    <el-tag v-if="scope.row.enabled === 1">启用</el-tag>
                                    <el-tag type="info" v-if="scope.row.enabled === 2">禁用</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" show-overflow-tooltip align="center" min-width='150' fixed="right">
                            <template #default="{ row }">
                                <div class="btn-group">
                                    <!-- <el-tooltip content="销售统计" placement="top" effect="light">
                                        <i class="icow icow-shuju"></i>
                                    </el-tooltip> -->
                                    <el-tooltip content="详情" placement="top" effect="light">
                                        <i class="icow icow-chakanxiangqing" @click="detaliClick(row)"
                                            v-has="'deviceDetails'"></i>
                                    </el-tooltip>
                                    <el-tooltip content="编辑" placement="top" effect="light">
                                        <i class="icow icow-bianji2" @click="editClick(row)" v-has="'deviceEdit'"></i>
                                    </el-tooltip>
                                    <el-tooltip content="删除" placement="top" effect="light">
                                        <i class="icow icow-shanchu1" @click="removeClick(row)" v-has="'deviceRemove'"></i>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="tr">
                        <div class="onbg">共<span>{{ deviceData?.length }}</span>条记录</div>
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[10, 15, 20, 25]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { ElMessage, ElTable, ElTag } from 'element-plus';
import { DeviceList, DeviceRemove } from '@/api/Device'

const route = useRoute()
const router = useRouter()
const routes = ref()
const options = [
    {
        value: '',
        label: ''
    },
    {
        value: '2',
        label: '离线'
    },
    {
        value: '1',
        label: '在线'
    }
]
const loading = ref(true)
const SearchList = reactive({
    page: 1,
    limit: 15,
    online: '',
    keyword: ''
})
const formRef = ref()
//获取设备信息
const deviceData = ref()
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)

onMounted(() => {
    routes.value = route.matched
    console.log(routes.value);
    getDeviceList()
})
const getDeviceList = async () => {
    const data = await DeviceList(SearchList).then(res => {
        const { code, data } = res
        loading.value = false
        if (code == 200) {
            deviceData.value = data.data
            total.value = data.total
        }
    }).catch((err) => {
        loading.value = false
    })
}
const handleSizeChange = (page) => {
    SearchList.limit = page
    getDeviceList()
}
const handleCurrentChange = (current) => {
    SearchList.page = current
    getDeviceList()
}
const searchBtn = () => {
    getDeviceList()
}
const cancelClick = () => {
    SearchList.online = ''
    SearchList.keyword = ''
    getDeviceList()
}
//点击详情按钮
const detaliClick = (row) => {
    let id = row.id
    router.push({
        name: 'deviceDetali',
        state: { id }
    })
}
//点击编辑按钮
const editClick = (row) => {
    let param = JSON.parse(JSON.stringify(row))
    router.push({
        name: 'addDevice',
        state: { param }
    })
}
//点击删除
const removeClick = (row) => {
    ElMessageBox.confirm(
        '确认要删除这条数据吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const Remove = await DeviceRemove(row.id)
            const { code, data } = Remove
            if (code == 200) {
                ElMessage.success('删除成功')
                getDeviceList()
            }
        })
        .catch(() => {
        })
}
</script>

<style lang="less" scoped>
.text-primary {
    color: #44abf7 !important;
}

.page-content {
    width: 100%;
    background: #fff;
    padding: 20px 30px;
    position: relative;
    height: auto;
    overflow: hidden;
}

.page-toolbar {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 0;
    vertical-align: middle;
}

.btn {
    outline: none !important;
    padding: 8px 16px;
    margin-right: 5px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    border: 1px solid transparent;
}

.btn-sm {
    display: inline-block;
    padding: 7px 8px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: #dddddd;
    text-align: center;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.btn-primary {
    background: #44abf7 !important;
    border-color: #44abf7 !important;
    color: #fff !important;
}

.btn-danger {
    background: #eb6060 !important;
    border-color: #eb6060 !important;
    color: #fff !important;
}

.btn-success {
    background: #54c952 !important;
    border-color: #54c952 !important;
    color: #fff !important;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.fa-plus::before {
    content: "\f067";
}

.pull-left {
    .el-button {
        padding: 2px 10px;
    }
}

.page-table-header {
    border: 1px solid #efefef;
}

.page-table {
    margin-top: 8px;
}

.table-tag {
    margin: 10px;
}

.btn-group {
    overflow: visible;
    text-align: center;
}



.btn-operation i {
    font-size: 12px;
}

.icow-shuju:before {
    content: "\e65a";
}

.icow-chakanxiangqing:before {
    content: "\e684";
}

.icow-sysset:before {
    content: "\e606";
}

.icow-syssetL:before {
    content: "\e613";
}

.icon-calendar:before {
    content: "\e77a";
}

.icow-bianji2:before {
    content: "\e62b";
}

.icow-shanchu1:before {
    content: "\e636";
}

.tr {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
    line-height: 32px;
    border-bottom: 1px solid #efefef;

    .onbg {
        margin-right: 5px;
        color: #000;
        line-height: 12px;
        font-size: 14px;
        padding: 7px 10px;

        span {
            color: red;
            padding: 7px 10px;
            font-size: 14px;
            font-weight: bold;
        }
    }
}

.btn-group i {
    margin-right: 10px;
    margin-left: 10px;
}

.selectstyle:hover {
    background-color: #409eff;
    color: #fff;
}

:deep(.el-button) {
    padding: 2px 10px;
    font-size: 12px;
    letter-spacing: 2px;
}
</style>
